<template>
  <div class="management-merchant views-container">
    <choose-link ref="chooseIconLink" :config="chooseIconLinkConfig" :changeEvt="uploadIconFileChange"></choose-link>
    <div class="wlm-table">
      <div class="wlm-dialog-content">
        <el-form
          :ref="formFormatData.key"
          :model="formFormatData.formData"
          size="small"
          label-width="150px"
class="retail-form"
label-position="right"
          :rules="formFormatData.rules"
        >
          <el-form-item
            label="轮播排序"
            prop="sort"
          >
            <el-input-number v-model.trim="formFormatData.formData.sort" :controls="false">
            </el-input-number>
            <div class="form-help">注：数值越大越靠前</div>
          </el-form-item>
          <el-form-item
            label="轮播图标题"
            prop="title"
          >
            <el-input v-model.trim="formFormatData.formData.title" style="width:270px">
            </el-input>
          </el-form-item>
          <el-form-item
            label="选择链接"
          >
            <el-input v-model.trim="formFormatData.formData.link" @focus="uploadFileToggle" style="width:270px">
            </el-input>

             <!-- <div class="link-box" ></div> -->
          </el-form-item>
          <el-form-item
            label="添加图片"
            prop="image"
          >
            <choose-files
              ref="chooseFiles"
              :config="chooseVideostyletConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">轮播图建议尺寸640*260</div>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch
              :active-value="1"
              :inactive-value="2"
              v-model="formFormatData.formData.is_status"
            > </el-switch>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/merchant/goodshopcarousel', code: 1 }})" type="primary">保存</el-button>
        <router-link tag="span" to="/merchant/business">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
  </div>
</template>

<script>
import {
  getdetail,
  addGoodShop,
  setStatus,
  editGoodShop
} from '@/api/platform'
import ChooseLink from '@/components/ChooseLink/index'
import mixins from '@/mixins/mixins'
import ChooseFiles from '@/components/ChooseFiles/index'
export default {
  mixins: [mixins.getters('Form')],
  name: 'UserPlatform',
  components: {
    ChooseFiles,
    ChooseLink
  },
  data() {
    return {
      chooseVideostyletConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isLocal: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'image',
          model: 'img'
        }
      },
      chooseIconLinkConfig: {
        type: ['chooseLink'],
        initList: [],
        link_type: '1'
      },
      formFormatData: {
        key: 'goodshop',
        model: {
          noCreateEdit: false,
          bindDialog: 'dialogTableVisible'
        },
        api: {
          editForm: {
            api: getdetail, // 编辑获取表单信息
            params: {
              id: ''
            },
            filters: {
              img: {
                bindInit: ['chooseVideostyletConfig']
              }
            },
            redirect: 'rotation_id'
          },
          submitForm: this.$route.query.rotation_id ? editGoodShop : addGoodShop, // 编辑提交，新增提交
          change: {// 局部修改
            is_status: {
              key: 'is_status',
              api: setStatus
            }
          }
        },
        formData: {
          title: '',
          sort: '',
          is_status: 1,
          image: [],
          link: ''
        },
        rules: {
          sort: [{
            required: true,
            message: '请输入轮播排序',
            trigger: 'blur'
          }],
          title: [{
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }],
          image: [{
            required: true,
            message: '请选择图片',
            trigger: 'blur'
          }]
        }
      }
    }
  },
  methods: {
    uploadFileToggle() {
      this.$refs.chooseIconLink.toggle()
    },
    uploadIconFileChange(files) {
      const { currentRow: [file_path] } = files
      if (file_path) {
        console.log(file_path, 'file_path+++++')
        this.formFormatData.formData.link = file_path
      } else {
        this.$message.error('请选择链接~!')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
    // /deep/.el-input__inner{
    //     width: 220px;
    // }
      .form-help{
        color: #999;
    line-height: 14px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 400;
  }

</style>
